<template>
  <div>
    <header>
      <van-row gutter="10">
        <van-col span="3">
          <van-icon size="1.8em" name="cross" @click="goLastPage"/>
        </van-col>
        <!-- 标题 -->
        <van-col span="15">川西坝子(羊犀2.0直营店)</van-col>
        <van-col span="2">
          <van-icon name="orders-o" />
        </van-col>
        <van-col span="4">
          <van-button round type="info" size="mini" class="public" @click="goPublic">发布</van-button>
        </van-col>
      </van-row>
    </header>
    <div class="container">
      <!-- 评分部分的内容 -->
      <van-row>
        <van-col span="3">总体</van-col>
        <van-col span="14">
          <van-rate v-model="value" @change="rateChange" />
        </van-col>
        <van-col span="7" class="good">{{status[Math.floor(value-1)]}}</van-col>
      </van-row>

      <div v-if="!value==0">
        <van-row>
          <van-col span="3">口味</van-col>
          <van-col span="14">
            <van-rate v-model="value1" @change="rateChange"/>
          </van-col>
          <van-col span="7" class="good" >{{status[value1-1]}}</van-col>
        </van-row>
        <van-row>
          <van-col span="3">环境</van-col>
          <van-col span="14">
            <van-rate v-model="value2" @change="rateChange"/>
          </van-col>
          <van-col span="7" class="good">{{status[value2-1]}}</van-col>
        </van-row>
        <van-row>
          <van-col span="3">服务</van-col>
          <van-col span="14">
            <van-rate v-model="value3" @change="rateChange"/>
          </van-col>
          <van-col span="7" class="good">{{status[value3-1]}}</van-col>
        </van-row>
        <van-row>
          <van-col span="3">食材</van-col>
          <van-col span="14">
            <van-rate v-model="value4" @change="rateChange"/>
          </van-col>
          <van-col span="7" class="good">{{status[value4-1]}}</van-col>
        </van-row>
      </div>
      <!-- 评论区域 -->
      <div class="box">
        <textarea rows="8" placeholder="可分享口味， 环境， 服务， 食材等方面的体验还可以用菜品标签评价菜品哦！" v-model="comments"></textarea></textarea>
        <p>写15个字，有机会被采纳为精选点评</p>
      </div>
      <van-tag round plain size="large">+ 标题</van-tag>
      <van-tag round plain size="large">+ 话题</van-tag>
      <!-- 文件上传部分 -->
      <van-row>
        <van-col span="6">
          <van-uploader              v-model="fileList" multiple
            :after-read="afterRead"
            :preview-image="false"
            >
            <van-button icon="photo" type="default">上传图片</van-button>
          </van-uploader>
        </van-col>

        <van-col span="6">
          <van-uploader>
            <van-button icon="photo" type="default">上传视频</van-button>
          </van-uploader>
        </van-col>

        <van-col span="11" class="text-content">
          <span>
            100字+3张图或15秒视频有机会
            <strong>赢得100积分</strong>
          </span>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: 0,
      value1: 1,
      value2: 2,
      value3: 3,
      value4: 4,
      comments: '',
      status: ['很差', '还行', '一般', '满意', '超赞'],
      fileList: []
    }
  },
  created () {
  },
  methods: {
    goLastPage () {
      this.$router.go(-1)
    },
    rateChange () {
      this.value = (this.value1 + this.value2 + this.value3 + this.value4) / 4
    },
    async goPublic () {
    // 需要传送给服务器的值
    //   console.log(this.comments)
    //   console.log(this.value)
    //   console.log(this.fileList)
      await this.$http.post('http://localhost:8080/comment', {
        body: this.comments,
        tasteScore: this.value1,
        environmentScore: this.value2,
        serverScore: this.value3,
        ingredientScore: this.value4
      }).then(function (response) {
        console.log('res', response)
      })
    },
    async afterRead (file) {
      // 此时可以自行将文件上传至服务器
      var formData = new FormData()
      formData.append('file', file)
      this.$http.post('http://192.168.35.30:9008/file/upload', { file: formData }).then(function (response) {
        console.log('res', response)
      })
    }
  }
}
</script>

<style lang="less" scoped>
header {
  padding: 10px 10px 15px 10px;
  height: 20px;
  background-color: #fff;
}
.container {
  padding: 0 10px;
  background-color: #fff;
  .box {
    overflow: hidden;
    textarea {
      border: 0px;
      margin: 10px 10px;
      width: 90%;
    }
    p {
      float: right;
      font-size: 14px;
      color: #ccc;
    }
  }
  span {
    font-size: 12px;
    strong {
      font-weight: 400;
      color: rgb(254, 204, 47);
    }
  }
}
// 修改组件默认样式
.van-tag--round {
  margin: 0 5px;
  color: #000 !important;
}
.van-uploader {
  display: inline-block;
  margin: 10px 3px;
  border: 1px solid #eee;
}
.van-button.van-button--default.van-button--normal {
  padding: 0;
  border-radius: 10px;
  height: 70px;
  width: 70px;
}
.van-icon.van-icon-photo.van-button__icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.van-button__text {
  color: #ccc;
  font-size: 10px;
  line-height: 0px;
}
.text-content {
  padding: 20px 5px;
}
// 标题部分的样式
.van-col.van-col--15 {
  padding-top: 2px;
}
.van-button--info {
  background-color: rgb(254, 204, 47);
  color: #fff;
}
.public .van-button__text[data-v-cd087c58] {
    color: #fff;
}
// 评级部分
.good {
  font-size: 15px;
  color: rgb(119, 119, 119);
}
</style>
